<template>
  <div class="friend-list">
    <div class="friend-list-header">
      <h3>好友列表</h3>
      <span class="online-count">
        在线: {{ onlineFriends.length }}/{{ friends.length }}
      </span>
    </div>

    <div class="friend-search">
      <input 
        type="text" 
        v-model="searchQuery"
        placeholder="搜索好友..."
      >
    </div>

    <div class="friend-requests" v-if="friendRequests.length > 0">
      <h4>好友请求 ({{ friendRequests.length }})</h4>
      <div 
        v-for="request in friendRequests" 
        :key="request.id"
        class="friend-request"
      >
        <div class="request-info">
          <img :src="request.from.avatar" class="avatar" />
          <div class="request-details">
            <div class="username">{{ request.from.username }}</div>
            <div class="message" v-if="request.message">
              {{ request.message }}
            </div>
          </div>
        </div>
        <div class="request-actions">
          <button 
            class="accept"
            @click="handleAcceptRequest(request.id)"
          >
            接受
          </button>
          <button 
            class="reject"
            @click="handleRejectRequest(request.id)"
          >
            拒绝
          </button>
        </div>
      </div>
    </div>

    <div class="friends-container">
      <div class="friend-group">
        <h4>在线好友</h4>
        <div 
          v-for="friend in filteredOnlineFriends" 
          :key="friend.id"
          class="friend-item"
          :class="friend.status"
        >
          <img :src="friend.avatar" class="avatar" />
          <div class="friend-info">
            <div class="username">{{ friend.username }}</div>
            <div class="status">
              {{ friend.status === 'playing' ? '对局中' : '在线' }}
            </div>
          </div>
          <div class="friend-actions">
            <button 
              v-if="friend.status !== 'playing'"
              @click="$emit('challenge', friend)"
            >
              邀请对局
            </button>
            <button 
              class="remove"
              @click="handleRemoveFriend(friend.id)"
            >
              删除
            </button>
          </div>
        </div>
      </div>

      <div class="friend-group">
        <h4>离线好友</h4>
        <div 
          v-for="friend in filteredOfflineFriends" 
          :key="friend.id"
          class="friend-item offline"
        >
          <img :src="friend.avatar" class="avatar" />
          <div class="friend-info">
            <div class="username">{{ friend.username }}</div>
            <div class="last-seen">
              最后在线: {{ formatLastSeen(friend.lastActive) }}
            </div>
          </div>
          <div class="friend-actions">
            <button 
              class="remove"
              @click="handleRemoveFriend(friend.id)"
            >
              删除
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useFriendSystem } from '../composables/useFriendSystem'
import type { UserProfile } from '../types/social'

const emit = defineEmits<{
  (e: 'challenge', friend: UserProfile): void
}>()

const {
  friends,
  onlineFriends,
  friendRequests,
  acceptFriendRequest,
  rejectFriendRequest,
  removeFriend
} = useFriendSystem()

const searchQuery = ref('')

const filteredOnlineFriends = computed(() => {
  if (!searchQuery.value) return onlineFriends.value
  return onlineFriends.value.filter(friend => 
    friend.username.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const filteredOfflineFriends = computed(() => {
  const offlineFriends = friends.value.filter(f => f.status === 'offline')
  if (!searchQuery.value) return offlineFriends
  return offlineFriends.filter(friend => 
    friend.username.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const handleAcceptRequest = async (requestId: string) => {
  await acceptFriendRequest(requestId)
}

const handleRejectRequest = async (requestId: string) => {
  await rejectFriendRequest(requestId)
}

const handleRemoveFriend = async (friendId: string) => {
  if (confirm('确定要删除这个好友吗？')) {
    await removeFriend(friendId)
  }
}

const formatLastSeen = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - new Date(date).getTime()
  
  const minutes = Math.floor(diff / 60000)
  if (minutes < 60) {
    return `${minutes}分钟前`
  }
  
  const hours = Math.floor(minutes / 60)
  if (hours < 24) {
    return `${hours}小时前`
  }
  
  const days = Math.floor(hours / 24)
  if (days < 30) {
    return `${days}天前`
  }
  
  return new Date(date).toLocaleDateString()
}
</script>

<style scoped>
.friend-list {
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.friend-list-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.online-count {
  color: #666;
  font-size: 14px;
}

.friend-search {
  padding: 10px;
}

.friend-search input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.friend-requests {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.friend-request {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

.request-info {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.request-actions {
  display: flex;
  gap: 10px;
}

.friend-group {
  padding: 10px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 4px;
}

.friend-item:hover {
  background: #f5f5f5;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.friend-info {
  flex: 1;
}

.username {
  font-weight: bold;
}

.status {
  font-size: 12px;
  color: #4CAF50;
}

.last-seen {
  font-size: 12px;
  color: #666;
}

.friend-actions {
  display: flex;
  gap: 5px;
}

button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.accept {
  background: #4CAF50;
  color: white;
}

button.reject {
  background: #f44336;
  color: white;
}

button.remove {
  background: #666;
  color: white;
}

.offline {
  opacity: 0.6;
}

.playing {
  background: #e3f2fd;
}
</style> 